<template>
  <div class="headerbox">
    <div class="header">
      <div class="headerL">
        <router-link to="/" class="goback">
          <img src="/assets/images/goback.png" />
        </router-link>
      </div>
      <div class="headerC0">
        <div class="ssdiv">
          <img src="/assets/images/ss.png" />
          <input
            v-model="keywords"
            type="text"
            placeholder="请输入搜索关键字"
            @change="getProductData"
          />
        </div>
      </div>
      <div class="headerR" @click="showPopup = true">
        <a href="javascript:void(0)"><img src="/assets/images/tr.png" /></a>
      </div>
    </div>
  </div>
  <div class="clear"></div>
  <div class="shopType">
    <van-dropdown-menu>
      <van-dropdown-item v-model="orders" :options="ordersOption" @change="getProductData" />
      <van-dropdown-item v-model="status" :options="statusOption2" @change="getProductData" />
    </van-dropdown-menu>
  </div>
  <div class="clear"></div>
  <div class="hbox"></div>
  <div class="mainWarp" style="background: #f3f3f3">
    <ul class="proul">
      <li v-for="item in productdata" :key="item.id">
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }"
          ><img :src="item.thumbs_text"
        /></router-link>
        <router-link :to="{ path: '/product/product/info', query: { proid: item.id } }">
          <p class="tit">
            {{ item.name }}
          </p>
        </router-link>
        <div class="price">
          <p>￥{{ item.price }}</p>
        </div>
      </li>
    </ul>
  </div>
  <div class="clear"></div>
  <van-popup
    v-model:show="showPopup"
    position="right"
    :style="{ height: '100%', paddingTop: '60px' }"
  >
    <van-sidebar v-model="typeid">
      <van-sidebar-item
        v-for="item in typelist"
        :key="item.id"
        :title="item.name"
        @click="ChangeType(item.id)"
      />
    </van-sidebar>
  </van-popup>
</template>
<script setup>
const route = useRoute();
const ordersOption = ref([
  { text: "全部商品", value: "" },
  { text: "价格排序", value: "price" },
  { text: "库存排序", value: "stock" },
]);
const statusOption2 = ref([
  { text: "默认排序", value: "" },
  { text: "推荐商品", value: "3" },
  { text: "热销商品", value: "2" },
  { text: "新款商品", value: "1" },
]);
const showPopup = ref(false);
const typeid = ref(0);
const typeids = ref(0);
const orders = ref("");
const status = ref("");
const productdata = ref([]);
const typelist = ref([]);
const keywords = ref("");
onMounted(() => {
  typeids.value = route.query.typeid ? route.query.typeid : 0;
  getTypeData();
  getProductData();
});
const getTypeData = async () => {
  let result = await Api.productType();
  if (result.code == 1) {
    typelist.value = result.data;
    typelist.value.unshift({
      id: 0,
      name: "全部",
    });
    // 路由跳转默认分类回显样式
    typelist.value.forEach((item, index) => {
      if (item.id == typeids.value) {
        typeid.value = index;
      }
    });
  }
};

const getProductData = async () => {
  let data = {
    keywords: keywords.value,
    typeid: typeids.value,
    orders: orders.value,
    status: status.value,
  };
  let result = await Api.productList(data);
  if (result.code == 1) {
    productdata.value = result.data;
  }
};

const ChangeType = (val) => {
  typeid.value = val;
  typeids.value = val;
  showPopup.value = false;
  getProductData();
};

</script>
